{% extends 'default/base.html' %}
{% load bootstrap %}
{% block content %}

<div class="row wrapper border-bottom white-bg page-heading">
    <div class="col-lg-10">
        <h2>添加报警规则 | Add Alarm.</h2>
    </div>
    <div class="col-lg-2">
    </div>
</div>

<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-10">
            <div class="ibox float-e-margins">
                {% include "listOrAdd.html" %}
                <div class="ibox-title">
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-user"></ul>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>

                <div class="ibox-content">
                <form class="form-horizontal" action="" method="post" name="horizontal" role="form" autocomplete="off">
                {% csrf_token %}
                    {% if emg %}
                        <div class="alert alert-warning text-center">{{ emg }}</div>
                    {% endif %}
                    {% if smg %}
                        <div class="alert alert-success text-center">{{ smg }}</div>
                    {% endif %}

                   {{ af.group|bootstrap_horizontal }}
                    <div class="hr-line-dashed"></div>

                   {{ af.name|bootstrap_horizontal }}
                    <div class="hr-line-dashed"></div>

                   {{ af.level|bootstrap_horizontal }}
                    <div class="hr-line-dashed"></div>

                    <div class="form-group">
                        <label for="way" class="col-lg-2 control-label">报警途径</label>
                        <div class="col-sm-3">
                            <select id="way" size="10" class="form-control m-b" multiple>
                            {% for i in wayList %}
                                <option value="{{ i.0 }}">{{ i.1 }}</option>
                            {% endfor %}
                            </select>
                        </div>
                        <div class="col-sm-1">
                            <div class="btn-group" style="margin-top: 50px;">
                                <button type="button" class="btn btn-white" onclick="move_right('way', 'way_selected')"><i class="fa fa-chevron-right"></i></button>
                                <button type="button" class="btn btn-white" onclick="move_left('way_selected', 'way')"><i class="fa fa-chevron-left"></i> </button>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div>
                                <select id="way_selected" name="way" class="form-control m-b" size="10"  multiple>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label for="user" class="col-lg-2 control-label">接收用户</label>
                        <div class="col-sm-3">
                            <select id="user" size="10" class="form-control m-b" multiple>
                            {% for i in userList %}
                                <option value="{{ i.id }}">{{ i }}</option>
                            {% endfor %}
                            </select>
                        </div>
                        <div class="col-sm-1">
                            <div class="btn-group" style="margin-top: 50px;">
                                <button type="button" class="btn btn-white" onclick="move_right('user', 'user_selected')"><i class="fa fa-chevron-right"></i></button>
                                <button type="button" class="btn btn-white" onclick="move_left('user_selected', 'user')"><i class="fa fa-chevron-left"></i> </button>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div>
                                <select id="user_selected" name="user" class="form-control m-b" size="10"  multiple>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <div class="col-sm-4 col-sm-offset-5">
                           <button class="btn btn-white" type="reset"> 重置 </button>
                           <button id="postButton" class="btn btn-primary" type="submit"> 提交 </button>
                        </div>
                    </div>
                </form>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    window.$ && $(function(){
        $("#postButton").click(function(){

            $("#way option").each(function(){
                $(this).removeAttr("selected");
            });
            $("#way_selected option").each(function(){
                $(this).prop("selected",true);
            });

            $("#user option").each(function(){
                $(this).removeAttr("selected");
            });
            $("#user_selected option").each(function(){
                $(this).prop("selected",true);
            });
        });
    });


    function move_left(from, to) {
        $("#"+from+" option").each(function(){
            if ( $(this).prop("selected") == true ) {
                $("#"+to).append(this);
                $(this).attr("selected",'false');
            }
            $(this).attr("selected",'true');
        });
    }
    function move_right(from, to) {
        $("#"+from+" option").each(function(){
            if ( $(this).prop("selected") == true ) {
                $("#"+to).append(this);
            }
        });
    }
</script>
{% endblock content %}